<div id="main" class="settingsMain">
    <ul class="nav nav-tabs" role="tablist">
        <!-- <li class="nav-item"><a class="nav-link active"href="#containerSettings" data-toggle="tab" role="tab">Container Settings</a></li> -->
        <li class="nav-item"><a class="nav-link active"href="#userSettings" data-toggle="tab" role="tab">User Settings</a></li>
        <li class="nav-item"><a class="nav-link"href="#roleSettings" data-toggle="tab" role="tab">Role Settings</a></li>
    </ul>
    <div class="tab-content">
        <!-- <div id="containerSettings" class="tab-pane fade show active">
            <h1 class="settingsHeader">Container Settings</h1>
            <div class="d-flex justify-content-center align-items-center mt-5">
                    <div class="card bg-light border-0 shadow-sm w-50">
                            <div class="card-body">
                                <h4 class="mb-3">Portainer.io</h4>
                                <p>
                                    Docker stack management and logs are provided by <a href="https://www.portainer.io/" target="_blank">portainer.io</a>.
                                    Use the button below to view container information for this WALKOFF instance.
                                </p>
                                <p class="d-flex justify-content-center align-items-center">
                                    <a class="btn btn-primary" href="/portainer/" target="_blank">Manage Stack</a>
                                </p>
                            </div>
                        </div>
            </div>
        </div> -->
        <div id="userSettings" class="tab-pane fade show active">
            <!-- <h1 class="settingsHeader">User Settings</h1> -->

            <div class="row mt-3">
                <div class="col-6">
                    <button (click)="addUser()" class="btn btn-outline-primary mx-1"><i class="fa fa-plus"></i> Add User</button>
                    <button (click)="editTimeout()" class="btn btn-outline-primary mx-1">Timeout Settings</button>
                </div>
                <div class="col-6">
                    <div class="form-group d-flex justify-content-end">
                        <div class="col-8 px-0">
                            <input class="form-control" placeholder="Filter Users..." [formControl]="filterQuery" />
                        </div>
                    </div>
                </div>
            </div>

            <ngx-datatable #userTable class='material expandable' [columnMode]="'flex'" [rows]="displayUsers"
             [headerHeight]="50" [footerHeight]="50" [rowHeight]="undefined" [sortType]="'multi'" [sorts]="[{prop: 'username', dir: 'asc'}]" [limit]="10">
                <!-- Column Templates -->
                <ngx-datatable-column name="Username" prop="username" [flexGrow]="3"></ngx-datatable-column>
                <ngx-datatable-column name="Roles" [sortable]="false" [flexGrow]="3">
                    <ng-template let-row="row" ngx-datatable-cell-template>
                        {{getFriendlyRoles(row.roles)}}
                    </ng-template>
                </ngx-datatable-column>
                <ngx-datatable-column name="Active" prop="active" [flexGrow]="1">
                    <ng-template let-row="row" ngx-datatable-cell-template>
                        {{getFriendlyBool(row.active)}}
                    </ng-template>
                </ngx-datatable-column>
                <ngx-datatable-column name="Actions" [resizeable]="false" [sortable]="false" [draggable]="false" [flexGrow]="2">
                    <ng-template let-row="row" ngx-datatable-cell-template>
                        <button (click)="editUser(row)" class="btn btn-primary mx-1" ngbTooltip="Edit User">
                            <i class="fa fa-edit"></i>
                        </button>
                        <button (click)="deleteUser(row)" class="btn btn-danger mx-1" ngbTooltip="Delete User">
                            <i class="fa fa-times"></i>
                        </button>
                    </ng-template>
                </ngx-datatable-column>
            </ngx-datatable>
        </div>

        <div id="roleSettings" class="tab-pane fade">
            <settings-roles-component></settings-roles-component>
        </div>
    </div>
</div>